<!doctype html>
<html class="no-js">

<head>
    <title>我的订单</title>
    <#include "/res/components/meta.html" />
    <#include "/res/components/stylesheets.html" />
    <link rel="stylesheet" type="text/css" href="/res/stylesheets/orderList.css">
</head>

<body>
    <div id="app">
        <div data-am-sticky data-am-widget="tabs" class="am-tabs am-tabs-d2">
            <ul class="am-tabs-nav am-cf">
                <li :class="{ 'am-active': tab1Style }">
                    <a href="#" @click="tabChanged(-1)">全部</a>
                </li>
                <li :class="{ 'am-active': tab2Style }">
                    <a href="#" @click="tabChanged(0)">待付款</a>
                </li>
                <li :class="{ 'am-active': tab3Style }">
                    <a href="#" @click="tabChanged(1)">已付款</a>
                </li>
                <li :class="{ 'am-active': tab4Style }">
                    <a href="#" @click="tabChanged(2)">已取消</a>
                </li>
            </ul>
        </div>
        <ul class="am-list order-list">
            <#list orderList as item>
                <li>
                    <div class="order-item-container">
                        <div class="order-item-top">
                            <span>${item.addTime}</span>
                            <span>
                                <span v-if="${item.status!} == 0">待付款</span>
                                <span v-if="${item.status!} == 1">已付款</span>
                                <span v-if="${item.status!} == 2">已取消</span>
                            </span>
                        </div>
                        <#list item.productList as prod>
                            <a href="/tg/product/getProductById?id=${prod.id!''}">
                                <div class="am-g order-item-product">
                                    <div class="am-u-sm-3 order-item-product-cover fakecrop">
                                        <img src="${prod.cover!}" />
                                    </div>
                                    <div class="am-u-sm-9 order-item-product-name">
                                        <div>${prod.name!}</div>
                                        <div>${prod.desc!}</div>
                                    </div>
                                </div>
                            </a>
                        </#list>
                        <div class="order-item-price">
                            <span>共1件商品 实付款：</span>
                            <span>￥${item.paid!'0'}</span>
                        </div>
                        <hr data-am-widget="divider" style="" class="am-divider am-divider-default" />
                        <div class="order-item-buttons">
                            <#if item.status=0>
                                <a href='/order/addOrder/?code=${item.orderCode}' type="button" class="am-btn am-btn-default am-btn-sm am-round">订单详情</a>
                            </#if>
                            <#if item.status!=0>
                                <a href='/order/orderInfo/${item.orderCode}' type="button" class="am-btn am-btn-default am-btn-sm am-round">订单详情</a>
                            </#if>
                            <!-- <button type="button" class="am-btn am-btn-default am-btn-sm am-round" @click="groupBuyingInfo(1234)">团购详情</button>
                            <button type="button" class="am-btn am-btn-secondary am-btn-sm am-round">再次购买</button> -->
                        </div>
                    </div>
                </li>
            </#list>
        </ul>
        <#include "/res/components/footer.html" />
    </div>
    <#include "/res/components/scripts.html" />
    <#include "/res/components/wxConfig.html" />
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            tab1Style: "${status!}" == '',
            tab2Style: "${status!}" == '0',
            tab3Style: "${status!}" == '1',
            tab4Style: "${status!}" == '2',
        },
        methods: {
            orderInfo: function(orderId) {
                window.location.href = "/tg/order/orderInfo/" + orderId;
            },
            groupBuyingInfo: function(groupId) {
                window.location.href = "/tg/groupBuyingInfo";
            },
            tabChanged: function(index) {
                if (index == -1) {
                    window.location.href = "/tg/order/getOrder";
                } else {
                    window.location.href = "/tg/order/getOrder?status=" + index;
                }
            }
        }
    })
    wx.ready(function() {
        initWXShare()
    })
    </script>
</body>

</html>